<template>
	<view class="container">
		<view class="content">
			<view class="head-section">
				<!-- <view class="" style="margin: 10rpx;">
					<u-icon name="arrow-left" size='25px' color='#eeeeee' @click="returnIndex"></u-icon>
				</view> -->
				<!-- <view class="wuliu">
					<view class="" v-if="!(orderCancelLog.remark||orderFailLog.remark)">
						<u-icon name="more-circle-fill" style='margin-right:10rpx;'></u-icon>
						<text style="line-height: 80rpx;text-align: center;">待收货</text>
					</view>
					<view v-if="false">
						<u-icon name="checkmark-circle-fill" style='margin-right:10rpx;'></u-icon>
						<text style="line-height: 80rpx;text-align: center;">已完成</text>
					</view>
					<view v-if="orderCancelLog.remark">
						<u-icon name="close-circle-fill" style='margin-right:10rpx;'></u-icon>
						<text style="line-height: 80rpx;text-align: center;">已取消</text>
					</view>
					<view v-if="orderFailLog.remark">
						<u-icon name="close-circle-fill" style='margin-right:10rpx;'></u-icon>
						<text style="line-height: 80rpx;text-align: center;">提交失败</text>
					</view>
					<view>
						<view class="reasonButton" @click="showReason()" v-if="orderCancelLog.remark||orderFailLog.remark" >
						<text class="wordClass" style="font-size: 24rpx;">查看原因</text>
					</view>
					</view>
					
				</view> -->
				<!-- <view class="cgr-info" style="margin: 0 auto;">
					<u-icon name="map"></u-icon>
					<view class="">
						<image src="../../static/newh5/address.png" class="yticon" style="width: 20px;height: 20px;">
						</image>
					</view>
					<view class="">
						<text>{{order.consigneeName}}</text>
						<text class="tel">{{order.mobile}}</text>
						<view class="address">
							<text>{{order.area+' '+order.ext.addr}}</text>
						</view>
					</view>

				</view> -->
			</view>
			<!-- 开头发货信息 -->
			<view class="total">
				<view class="invoiceBox">
					<view class="title">
						<view class="">
							<text class="wordClass" style="font-size: 16px;"> 发货信息</text>
						</view>
					</view>
					<view class="total-l">
						<text class="l-word">供应商子订单号</text>
						<text class="wordClass" style="margin-left: 50rpx;">电子票</text>
					</view>
					<view class="total-l">
						<text class="l-word">发货方式</text>
						<text class="wordClass" style="margin-left: 50rpx;">数采小博科技发展有限公司</text>
					</view>
					<view class="total-l">
						<text class="l-word">状态</text>
						<text class="wordClass" style="margin-left: 50rpx;">91130400105670924W</text>
					</view>
				</view>
			</view>
			<!-- 原因弹窗 -->
			<uni-popup ref="showReason"  :mask-click="false">
				<view class="uni-tip">
					<text class="uni-tip-title">查看原因</text>
					<view class="popup-content uni-tip-content">
						<view class="order-info">{{orderCancelLog.remark}}</view>
						<view class="order-info">{{orderFailLog.remark}}</view>
						</view>
					<view class="uni-tip-group-button">
						<!-- <text class="uni-tip-button" @click="close('cancel')">取消</text> -->
						<text class="uni-tip-button confirm" @click="cancelReason()">确定</text>
					</view>
				</view>
			</uni-popup>
			
			<!-- <view class="line">
				<text>订单编号：{{order.sn}}</text>
				<copyButton :content="order.sn"></copyButton>
				<text class="status">{{statusData[order.status]}}</text>
				
			</view> -->
			<!-- <view class="line remark" v-if="order.status==='cancelled'||order.status==='refuse'&&orderCancelLog">
				<view class="left" style="width: 70px;">
					<text>取消原因：</text>
				</view>
				<view class="right">
					<text>{{orderCancelLog.remark}}</text>
				</view>
			</view> -->
			<!-- <view class="line remark" v-if="order.status=='commitFail'&&orderFailLog">
				<view class="left" style="width: 70px;">
					<text>失败原因：</text>
				</view>
				<view class="right">
					<text>{{orderFailLog.remark}}</text>
				</view>
			</view> -->

			<!-- <view class="cgr-info">
				<u-icon name="map"></u-icon>
				<text>{{order.consigneeName}}</text>
				<text class="tel">{{order.mobile}}</text>
				<view class="address">
					<text>{{order.area+' '+order.ext.addr}}</text>
				</view>
			</view> -->
			<view class="line">
				<image src="../../static/newh5/supply.png" class="yticon" style="width: 20px;height: 20px;"></image>
				<text>供应商：{{order.supplierName}}</text>
				<u-image v-if="order.protocolType=='eplus'&&order.productLogo!=''" :src="order.productLogo"
					width="128rpx" height="52rpx"></u-image>
			</view>
			<view class="product-list">
				<view class="item" v-for="item in order.items" :key="item.id" @click="goProductDetail(item.productId)">
					<view class="left">
						<image :src="item.thumbnail"></image>
					</view>
					<view class="right">
						<view class="name">
							<text>{{item.productName}}</text>
						</view>
						<view class="bottom">
							<!-- <view class="price">
								<text class="wordClass">￥{{item.salePrice|money}}</text>
							</view> -->
							<view class="num">
								<text class="wordClass">&#10005;{{item.num}}</text>
							</view>
						</view>
						<!-- v-if="order.status==='completed'" -->
						<view style="width: 100%;margin-top: 14rpx;">
							<view class="action" v-if="order.status==='completed'"  @click.stop="clickAfterSale(item)">
								申请售后</view>
						</view>
					</view>
				</view>
			</view>
			<view class="total">
				<view class="invoiceBox">
					<view class="title">
						<view class="">
							<text class="wordClass" style="font-size: 16px;">物流信息</text>
						</view>
					</view>
					<view class="total-l">
						<text class="l-word">物流公司</text>
						<text class="wordClass" style="margin-left: 50rpx;">电子票</text>
					</view>
					<view class="total-l">
						<text class="l-word">物流单号</text>
						<text class="wordClass" style="margin-left: 50rpx;">数采小博科技发展有限公司</text>
					</view>
					<view class="total-l">
						<text class="l-word">物流详情</text>
						<text class="wordClass" style="margin-left: 50rpx;">91130400105670924W</text>
					</view>
				</view>
			</view>

			<!--			<view class="line">-->
			<!--				<text>支付方式：{{order.payType==='integral'?'积分支付':order.payType==='money'?'现金支付':'积分 + 现金混合支付'}}</text>-->
			<!--			</view>-->
			<!-- <view class="line remark">
				<view class="left">
					<text>备注：</text>
				</view>
				<view class="right">
					<text>{{order.ext.remark}}</text>
				</view>
			</view> -->
			<view class="logistics" v-if="logisticsData.length>0">
				<uni-collapse :accordion="true">
					<uni-collapse-item v-for="(item,index) in logisticsData" :title="'发货信息'+(index+1)"
						:open="index===0">
						<view class="item">
							<view class="c-line" v-if="item.isSupplierSplit">供应商子订单号：{{item.emallSn}}</view>
							<view class="c-line">发货方式：{{dictData[item.deliveryType]}}</view>
							<view class="p-line">
								<view class="left-side">发货商品：</view>
								<view class="right-side">
									<view class="right-item" v-for="(product,pIndex) in item.detailList">
										<text>{{product.orderItem.productName}} x {{product.num}}</text>
									</view>
								</view>
							</view>
							<!-- v-if="item.deliveryType==='1'" -->
							<view class="c-line" v-if="item.deliveryType==='1'">物流公司：{{item.name}}</view>
							<view class="c-line" v-if="item.deliveryType==='1'">物流单号： {{item.sn}}
								<copyButton style='display: inline-flex' :content="item.sn"
									v-if="item.deliveryType==='1'"></copyButton>
							</view>
							<view class="p-line" v-if="item.deliveryType==='1'&&item.trackList.length>0">
								<view class="left-side">物流详情：</view>
								<view class="track-list">
									<view class="track-item" v-for="(track,tIndex) in item.trackList">
									</view>
								</view>
							</view>
							<view style="width: 100%;">
								<view @click="clickConfirm(item)" class="btn" style="float: right;"
									v-if="(order.status==='shipped'||order.status==='partialShipment')&&!item.isConfirmReceipt">
									确认收货</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<!-- <view class="total">
				<view class="total-l">
					<text class="l-word">商品总额</text>
					<text class="l-p wordClass">￥{{summary.totalPrice|twoBitMoney}}</text>
				</view>
				<view class="total-l">
					<text class="l-word">运费总计</text>
					<text class="l-p wordClass">￥{{summary.freight|twoBitMoney}}</text>
				</view>
				<view v-if="order.ext.confService" class="total-l">
					<text class="l-word">服务费</text>
					<text class="l-p wordClass">￥{{order.serviceFee|twoBitMoney}}</text>
				</view>
				<view v-if="order.ext.confService" class="total-l">
					<text class="l-word">优惠金额</text>
					<text class="l-p wordClass">-￥{{order.preferentialFee|twoBitMoney}}</text>
				</view>
				<view class="total-l">
					<text class="l-word">订单总额</text>
					<text class="l-p wordClass" style="color: red;">￥{{order.amount|twoBitMoney}}</text>
				</view>
				<view class="total-l">
					<text class="l-word">节约金额</text>
					<text class="l-p wordClass">￥{{summary.amountDesc|twoBitMoney}}</text>
				</view>
				<view class="time">
					<text>下单时间：{{order.createTime}}</text>
				</view>
			</view> -->
			<!-- <view class="total">
				<view class="invoiceBox">
					<view class="title">
						<view class="">
							<text class="wordClass" style="font-size: 16px;"> 发票信息</text>
						</view>
						<view class="">
							<text class="wordClass l-word" style="color: #909090;">查看更多</text>
							<u-icon name="arrow-down" style="color: #909090;"></u-icon>
						</view>
					</view>
					<view class="total-l">
						<text class="l-word">发票类型</text>
						<text class="wordClass" style="margin-left: 50rpx;">电子票</text>
					</view>
					<view class="total-l">
						<text class="l-word">发票抬头</text>
						<text class="wordClass" style="margin-left: 50rpx;">数采小博科技发展有限公司</text>
					</view>
					<view class="total-l">
						<text class="l-word">纳税识别号</text>
						<text class="wordClass" style="margin-left: 50rpx;">91130400105670924W</text>
					</view>
				</view>
			</view> -->
			<!-- <view class="total">
				<view class="invoiceBox">
					<view class="title">
						<view class="">
							<text class="wordClass" style="font-size: 16px;"> 订单信息</text>
						</view>
						<view class="">
							<text class="wordClass l-word" style="color: #909090;">查看更多</text>
							<u-icon name="arrow-down" style="color: #909090;"></u-icon>
						</view>
					</view>
					<view class="total-l">
						<text class="l-word" >订单编号<text class="wordClass" style="margin-left: 50rpx;" >{{order.sn}}</text></text>
						<copyButton :content="order.sn"></copyButton>
					</view>
					<view class="total-l">
						<text class="l-word">下单时间</text>
						<text class="wordClass" style="margin-left: 50rpx;">{{order.createTime}}</text>
					</view>
					<view class="total-l">
						<text class="l-word">*供应商订单号</text>
						<text class="wordClass" style="margin-left: 50rpx;">91130400105670924W</text>
						<copyButton :content="order.sn"></copyButton>
					</view>
				</view>
			</view> -->
			<view class="plusBuy" >
				<view class="plusButton">
					<text class="buttonWord">确认收货</text>
				</view>
				<!-- <view class="primaryButton" @click="goDetailWuLiu()">
					<text class="buttonWord">查看物流</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import copyButton from '../../components/copy.vue'
	import uniCollapse from '../../components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '../../components/uni-collapse-item/uni-collapse-item.vue'
	import {
		getOrderDetail,
		getLogistics,
		getOrderLogs
	} from '@/api/order/detail.js';
	import {
		getDict,
		confirmReceipt,
		getAllStatus,
		applyAftersale
	} from '../../api/order/order.js'
	export default {
		components: {
			uniCollapse,
			uniCollapseItem,
			copyButton
		},
		data() {
			return {
				order: {
					ext: {},
					items: {},
					master: {}
				},
				summary: {
					num: 0,
					totalPrice: 0,
					freight: 0,
					amount: 0,
					amountDesc: 0
				},
				logisticsData: {},
				statusData: {},
				dictData: {},
				id: '',
				orderCancelLog: {},
				orderFailLog: {},
			}
		},
		onLoad(op) {
			this.loadDictData()
			this.showOrderDetail(op.id);
			this.id = op.id
			this.getStatusData()
		},
		methods: {
			goDetailWuLiu(){
				console.log('点击物流跳转');
				uni.navigateTo({
					url: "/pages/order/logistics"
				})
			},
			showReason(){
				// this.$util.msg('加入购物车成功')
				// uni.showToast({
				// 	 title: 'content',
				// 	 duration: 3000, 
				// 	 mask:false, 
				// 	 icon:'none'
				// });
				this.$refs.showReason.open()
			},
			cancelReason(){
				this.$refs.showReason.close()
			},
			returnIndex() {
				uni.navigateBack();
			},
			loadDictData() {
				const param = {
					data: '["DELIVERY_TYPE"]'
				}
				getDict(param).then(res => {
					if (res.code === 0) {
						let data = res.data.DELIVERY_TYPE
						data.forEach(item => {
							this.dictData[item.code] = item.name;
						})
					} else {
						this.$util.msg(res.message)
					}
				})
			},
			getStatusData() {
				getAllStatus().then(res => {
					if (res.code === 0) {
						this.statusData = res.data
					}
				})
			},
			loadLogistics() {
				getLogistics({
					id: this.order.id
				}).then(res => {
					if (res.code === 0) {
						this.logisticsData = res.data
						console.log('物流信息',this.logisticsData);
					}
				})
			},
			loadCancelLog() {
				getOrderLogs({
					orderId: this.order.id
				}).then(res => {
					this.orderCancelLog = res.data.filter((t) => t.type === "cancelled" && t.remark)[0];
				})
			},
			loadCommitFailLog() {
				getOrderLogs({
					orderId: this.order.id
				}).then(res => {
					this.orderFailLog = res.data.filter((t) => t.type === "commitFail" && t.remark)[0];
				})
			},
			showOrderDetail(id) {
				getOrderDetail({
					sn: id
				}).then(res => {
					if (res.code == 0) {
						let datas = res.data
						this.order = datas;
						//支付总额
						this.summary.freight = datas.freight
						// datas.preferentialFee = 0;
						datas.items.forEach(item => {
							this.summary.num += item.num
							this.summary.totalPrice += item.salePrice * item.num
							if (item.salePrice < item.marketPrice) {
								this.summary.amountDesc += (item.marketPrice - item.salePrice) * item.num;
							}
						})
						this.summary.amount = this.summary.totalPrice + this.summary.freight
						if (datas.protocolType === 'eplus') {
							this.summary.amount = this.summary.amount + datas.serviceFee - datas.preferentialFee
						}
						if (this.order.status === 'cancelled' || this.order.status === 'refuse') {
							this.loadCancelLog()
						} else if (this.order.status === 'commitFail') {
							this.loadCommitFailLog()
						}
						this.loadLogistics()
					} else {
						this.$util.msg(res.message)
					}
				})
			},
			clickAfterSale(item) {
				let sn = this.order.sn
				let id = item.id
				let deptName = this.order.deptName
				const params = {
					orderItemId: id,
					orderSn: sn,
					type: 1
				}
				applyAftersale(params).then(res => {
					if (res.code === 0) {
						if (res.data) {
							uni.navigateTo({
								url: `/pages/aftersale/aftersale?sn=${sn}&id=${id}&deptName=${deptName}&type=1`,
							})
						} else {
							this.$util.msg('没有可以发起售后申请商品的数量')
						}
					} else {
						this.$util.msg(res.message)
					}
				})
			},
			goProductDetail(id) {
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			// 确认收货
			clickConfirm(item) {
				uni.showModal({
					title: '提示',
					content: '请确认是否已收到货？',
					confirmColor: '#fa436a',
					success: suc => {
						if (suc.confirm) {
							confirmReceipt({
								id: this.order.id,
								outgoingSn: item.outgoingSn
							}).then(res => {
								if (res.code === 0) {
									this.$util.msg('确认收货成功!')
									this.showOrderDetail(this.id)
								} else {
									this.$util.msg(res.message)
								}
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: $my-bg-color-grey;

		.wordClass {
			font-family: PingFangSC-Medium;
		}

		.my-navbar {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			font-size: $my-font-size-lg;
			border-bottom: 1px solid $my-border-color;
			background-color: $my-bg-color;
			position: fixed;
			left: 0;
			top: calc(var(--window-top) + var(--status-bar-height));
			z-index: 10;
			background: $my-bg-color;

			image {
				position: absolute;
				left: 30rpx;
				width: 28rpx;
				height: 40rpx;
			}
		}

		.content {
			// padding-top: 16rpx;
			font-size: $my-font-size-sm;

			.head-section {
				display: flex;
				flex-direction: column;
				// height: 336rpx;
				position: relative;
				// background-image: url(../../static/newh5/bg.png);
				background-position: absolute;
				background-repeat: no-repeat;
				background-size: 100% auto;
				background-position: 10 100%;

				.bg {
					position: absolute;
					left: 0;
					top: 0;
					// z-index: 999;
					width: 100%;
					height: 100%;
				}

				.wuliu {
					width: 100%;
					height: 80rpx;
					color: #EEEEEE;
					font-family: PingFangSC-Medium;
					font-size: 18px;
					display: flex;
					justify-content: center;
					align-items: center;
					.reasonButton{
						// flex: 1;
						// margin-left: 300rpx;
						// margin-: auto;
						width: 130rpx;
						height: 65rpx;
						padding-left: 15rpx;
						border: 1px solid #EEEEEE;
						border-radius: 15rpx;
					}
				}
			}

			.yticon {
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}

			.line {
				display: flex;
				align-items: center;
				height: 76rpx;
				border-bottom: 1px solid $my-border-color-grey;
				padding: 0 30rpx;
				background-color: $my-bg-color;

				&.remark {
					word-break: break-all;
					height: auto;
					padding: 30rpx;
					display: flex;

					.left {
						display: flex;
						align-items: center;
						width: 16%;
					}

					.right {
						width: 84%;
					}
				}

				&>.detail {
					color: $my-text-color-active;
				}

				.status {
					margin: auto;
					margin-right: 0;
					color: $my-bg-color-red;
				}
			}

			.cgr-info {
				display: flex;
				flex-direction: row;
				// margin:0 auto;
				z-index: 999;
				background: #EEEEEE;
				padding: 20rpx 30rpx;
				width: 92%;
				min-height: 150rpx;
				line-height: 55rpx;
				margin: 16rpx 0;
				margin-left: 8rpx;
				border-top: 1px solid $my-border-color-grey;
				border-bottom: 1px solid $my-border-color-grey;
				background-color: $my-bg-color;
				border-radius: 15rpx;

				.tel {
					margin-left: 30rpx;
				}

				.address {
					line-height: 18px;
					color: $my-text-color-grey;
				}
			}

			.logistics {
				width: 100%;
				margin: 16rpx 0;
				font-size: 13px;

				.item {
					background-color: #fff;
					width: 100%;
					padding: 16rpx 40rpx;
					display: flex;
					flex-direction: column;
					border-bottom: 1px solid #e2e2e2;

					.btn {
						width: 160upx;
						height: 60upx;
						margin: 0;
						padding: 0;
						text-align: center;
						line-height: 60upx;
						font-size: $font-sm + 2upx;
						background: #fff9f9;
						color: $base-color;
						border-radius: 10px;
						// border-color: $base-color;
						border: 0.5px solid $base-color;
						// border-color: #f7bcc8;
					}

					.c-line {
						padding: 10rpx 0;
					}

					.p-line {
						padding: 10rpx 0;
						display: flex;
						justify-content: flex-start;
						// align-items: center;

						.left-side {
							width: 70px;
							font-size: 13px;
						}

						.right-side {
							flex: 1;
							display: flex;
							flex-direction: column;

							.right-item {
								padding-bottom: 10rpx;
							}
						}

						.track-list {
							padding: 10rpx 0;

							.track-item {
								.time {}

								.day {}

								.content {}
							}
						}
					}

					.detail {}
				}
			}

			.product-list {
				// padding: 10rpx;
				border-top: 1px solid $my-border-color-grey;
				border-bottom: 1px solid $my-border-color-grey;

				.item {
					display: flex;
					border-bottom: 1px solid $my-border-color-grey;
					background-color: $my-bg-color;
					padding: 10rpx 20rpx;

					&:last-child {
						border-bottom: none;
					}

					.left {
						width: 200rpx;
						height: 200rpx;
						margin-right: 20rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.right {
						width: 550rpx;
						display: flex;
						// justify-content: space-between;
						flex-direction: column;

						.name {
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							line-height: 40rpx;
							height: 80rpx;
							word-break: break-all;
						}

						.bottom {
							display: flex;
							margin-top: 14rpx;

							.price {
								display: flex;
								flex-direction: column;
								// color: $my-text-color-red;
								line-height: 32rpx;
							}

							.num {
								margin: auto;
								margin-right: 0;
								margin-top: 0;
							}
						}

						.action {
							margin-top: 14rpx;
							width: fit-content;
							height: fit-content;
							padding: 4rpx 16rpx;
							text-align: center;
							font-size: 12px;
							color: $font-color-dark;
							background: #fff;
							border-radius: 15px;
							border: 0.5px solid #C0C4CC;
						}
					}
				}
			}
			.total {
				height: 300rpx;
				margin-top: 16rpx;
				padding: 20rpx 30rpx;
				background-color: $my-bg-color;
				.total-l {
					height: 52rpx;
					display: flex;
					align-items: center;
					.l-word{
						font-family: PingFangSC-Regular;
						color: #646464;
					}
					.l-p {
						margin: auto;
						margin-right: 0;
						// color: $my-text-color-red;
						
					}
				}
				.invoiceBox{
					.title{
						display: flex;
						justify-content: space-between;
					}
				}
				.time {
					width: 100%;
					text-align: left;
					color: $my-text-color-grey;
				}
			}
			.plusBuy{
				height: 100rpx;
				margin-top: 16rpx;
				padding: 20rpx 30rpx;
				background-color: $my-bg-color;
				display: flex;
				flex-direction: row-reverse;
				.plusButton{
					width: 130rpx;
					height: 65rpx;
					padding-left: 15rpx;
					border: 1px solid #FF4D4F;
					color: #FF4D4F;
					border-radius: 8px;
					.buttonWord{
						color: #FF4D4F;
						line-height: 65rpx;
					}
				}
				.primaryButton{
					margin-right: 20rpx;
					width: 130rpx;
					height: 65rpx;
					padding-left: 15rpx;
					border: 1px solid $border-color-dark;
					border-radius: 8px;
					.buttonWord{
						color: black;
						line-height: 65rpx;
					}
				}
			}
		}
	}
</style>
